<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创建地面</title>
</head>

<body>
  <!-- core -->
  <script src="./ThreeJs/js/three.js"></script>
  <!-- 用于检测动画运行时的帧数 -->
  <script src="./ThreeJs/js/stats.min.js"></script>
  <!-- 鼠标拖动3维模型 -->
  <script src="./ThreeJs/js/DragControls.js"></script>
  <!-- 相机控件：对Threejs的三维场景进行缩放、平移、旋转操作 -->
  <script src="./ThreeJs/js/OrbitControls.js"></script>
  <!-- GUI 组件，他可以为你的 demo 提供参数的设置 -->
  <script src="./ThreeJs/js/dat.gui.min.js"></script>
  <!-- 后期处理(EffectComposer) -->
  <script src="./ThreeJs/js/EffectComposer.js"></script>
  <!-- 渲染通道 -->
  <script src="./ThreeJs/js/RenderPass.js"></script>
  <!-- outlinepass 线条渲染 -->
  <script src="./ThreeJs/js/OutlinePass.js"></script>
  <!-- 抗锯齿 -->
  <script src="./ThreeJs/js/FXAAShader.js"></script>
  <!-- 自己定义后期处理着色器 -->
  <script src="./ThreeJs/js/CopyShader.js"></script>
  <!-- 自定义后期 ShaderPass -->
  <script src="./ThreeJs/js/ShaderPass.js"></script>
  <!-- 网格组合 -->
  <script src="./ThreeJs/js/ThreeBSP.js"></script>

  <script src="./ThreeJs/ThreeJs_Drag.js"></script>
  <script src="./ThreeJs/ThreeJs_Composer.js"></script>
  <script src="./ThreeJs/Modules.js"></script>
  <script src="./ThreeJs/js/jquery-1.11.0.min.js"></script>
  <script>
    var stats = initStats();
    var camera, scene, renderer, controls, composer, transformControls, options;
    var floor
    var objects = [];
    var selectobject = [];

    init();
    animate();

    function initScene() {
      scene = new THREE.Scene();
      scene.background = new THREE.Color(0xf0f0f0);
      scene.fog = new THREE.Fog(scene.background, 3000, 5000);
    }

    function initCamera() {
      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      camera.position.set(0, 800, 1500);
      camera.lookAt(new THREE.Vector3(0, 0, 0));
    }

    function initLight() {
      var directionalLight = new THREE.DirectionalLight(0xffffff, 0.3); //模拟远处类似太阳的光源
      directionalLight.color.setHSL(0.1, 1, 0.95);
      directionalLight.position.set(0, 200, 0).normalize();
      scene.add(directionalLight);

      var ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
      ambient.position.set(0, 0, 0);
      scene.add(ambient);
    }

    function initStats() {
      var stats = new Stats();
      stats.domElement.style.position = 'absolute';
      stats.domElement.style.left = '0px';
      stats.domElement.style.top = '0px';
      document.body.appendChild(stats.domElement);
      return stats;
    }

    function initRenderer() {
      renderer = new THREE.WebGLRenderer({
        antialias: true
      });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0x4682B4, 1.0);
      document.body.appendChild(renderer.domElement);
    }

    function initControls() {
      controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.5;
      // 视角最小距离
      controls.minDistance = 100;
      // 视角最远距离
      controls.maxDistance = 5000;
      // 最大角度
      controls.maxPolarAngle = Math.PI / 2.2;
    }

    function createFloor() {
      var loader = new THREE.TextureLoader();
      loader.load("./ThreeJs/images/floor.jpg", function (texture) {
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.set(10, 10);
        var floorGeometry = new THREE.BoxGeometry(2000, 2000, 1);
        var floorMaterial = new THREE.MeshBasicMaterial({
          map: texture
        });
        floor = new THREE.Mesh(floorGeometry, floorMaterial);
        floor.rotation.x = -Math.PI / 2;
        scene.add(floor);
        objects.push(floor);
      });
    }

    function init() {
      initScene();
      initCamera();
      initLight();
      initStats();
      initRenderer();
      initControls();
      createFloor();

      // raycaster = new THREE.Raycaster();  
      // mouse = new THREE.Vector2();

      window.addEventListener('resize', onWindowResize, false);
      //添加选中时的模板
      composer = new THREE.ThreeJs_Composer(renderer, scene, camera, options, selectobject);

    }

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      composer.render();
      update();
    }

    // 更新控件
    function update() {
      stats.update();
      controls.update();
    }

  </script>
</body>

</html>